2 * MediaWiki Widgets – CalendarWidget styles.
4 * @copyright 2011-2015 MediaWiki Widgets Team and others; see AUTHORS.txt
5 * @license The MIT License (MIT); see LICENSE.txt
8 /* stylelint-disable no-duplicate-selectors */
9 @import 'mediawiki.mixins';
12 @calendarHeight: 14em;
14 .mw-widget-calendarWidget {
15 width: @calendarWidth;
18 .mw-widget-calendarWidget-header {
23 // Overwrite OOUI's `.oo-ui-buttonElement-frameless.oo-ui-iconElement:first-child`
24 .mw-widget-calendarWidget-header .oo-ui-buttonWidget.oo-ui-iconElement {
29 .mw-widget-calendarWidget-header .mw-widget-calendarWidget-labelButton {
32 width: @calendarWidth - 2 * 3em;
34 .oo-ui-buttonElement-button {
35 width: @calendarWidth - 2 * 3em;
40 .mw-widget-calendarWidget-upButton {
45 .mw-widget-calendarWidget-prevButton {
49 .mw-widget-calendarWidget-nextButton {
53 .mw-widget-calendarWidget-body-outer-wrapper {
57 // Fit 7 days, 3em each
58 width: @calendarWidth;
59 // Fit 6 weeks + heading line, 2em each
60 height: @calendarHeight;
63 .mw-widget-calendarWidget-body-wrapper {
64 .mw-widget-calendarWidget-body {
65 display: inline-block;
67 // Fit 7 days, 3em each
68 width: @calendarWidth;
69 // Fit 6 weeks + heading line, 2em each
70 height: @calendarHeight;
73 .mw-widget-calendarWidget-body:not( .mw-widget-calendarWidget-old-body ):first-child {
74 margin-top: -@calendarHeight; /* stylelint-disable-line value-keyword-case */
75 margin-left: -@calendarWidth; /* stylelint-disable-line value-keyword-case */
78 .mw-widget-calendarWidget-body:not( .mw-widget-calendarWidget-old-body ):last-child {
84 .mw-widget-calendarWidget-body-wrapper-fade-previous {
85 width: @calendarWidth * 2;
86 height: @calendarHeight;
88 .mw-widget-calendarWidget-body:first-child {
89 margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
90 margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
91 .transition( margin-left 500ms );
95 .mw-widget-calendarWidget-body-wrapper-fade-next {
96 width: @calendarWidth * 2;
97 height: @calendarHeight;
99 .mw-widget-calendarWidget-body:first-child {
100 margin-left: -@calendarWidth !important; /* stylelint-disable-line value-keyword-case, declaration-no-important */
101 margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
102 .transition( margin-left 500ms );
106 .mw-widget-calendarWidget-body-wrapper-fade-up {
107 width: @calendarWidth;
108 height: @calendarHeight * 2;
110 .mw-widget-calendarWidget-body {
115 .mw-widget-calendarWidget-body:first-child {
116 margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
117 margin-top: 0 !important; /* stylelint-disable-line declaration-no-important */
118 .transition( margin-top 500ms );
122 .mw-widget-calendarWidget-body-wrapper-fade-down {
123 width: @calendarWidth;
124 height: @calendarHeight * 2;
126 .mw-widget-calendarWidget-body {
131 .mw-widget-calendarWidget-body:first-child {
132 margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
133 margin-top: -@calendarHeight !important; /* stylelint-disable-line value-keyword-case, declaration-no-important */
134 .transition( margin-top 500ms );
138 // Support: Browsers that render CSS Grid. All others ignore unknown `grid-*` properties.
139 // This avoids any calculation issues pushing items to next line.
140 .mw-widget-calendarWidget-body-month {
141 grid-template-columns: auto auto auto auto auto auto auto;
144 .mw-widget-calendarWidget-body-year {
145 grid-template-columns: auto auto;
148 .mw-widget-calendarWidget-body-duodecade {
149 grid-template-columns: auto auto auto auto auto;
152 .mw-widget-calendarWidget-day,
153 .mw-widget-calendarWidget-day-heading,
154 .mw-widget-calendarWidget-month,
155 .mw-widget-calendarWidget-year {
156 display: inline-block;
157 vertical-align: middle;
160 text-overflow: ellipsis;
164 .mw-widget-calendarWidget-day,
165 .mw-widget-calendarWidget-day-heading {
167 width: @calendarWidth / 7;
168 line-height: @calendarHeight / 7;
170 // Don't overlap the hacked-up fake box-shadow border we get when focussed
172 width: @calendarWidth / 7 - 0.2em;
176 &:nth-child( 7n+1 ) {
177 width: @calendarWidth / 7 - 0.2em;
181 &:nth-child( 42 ) ~ & {
182 line-height: @calendarHeight / 7 - 0.2em;
183 margin-bottom: 0.2em;
187 .mw-widget-calendarWidget-month {
189 width: @calendarWidth / 2;
190 line-height: @calendarHeight / 6;
192 // Don't overlap the hacked-up fake box-shadow border we get when focussed
194 width: @calendarWidth / 2 - 0.2em;
198 &:nth-child( 2n+1 ) {
199 width: @calendarWidth / 2 - 0.2em;
203 &:nth-child( 10 ) ~ & {
204 line-height: @calendarHeight / 6 - 0.2em;
205 margin-bottom: 0.2em;
209 .mw-widget-calendarWidget-year {
211 width: @calendarWidth / 5;
212 line-height: @calendarHeight / 4;
214 // Don't overlap the hacked-up fake box-shadow border we get when focussed
216 width: @calendarWidth / 5 - 0.2em;
220 &:nth-child( 5n+1 ) {
221 width: @calendarWidth / 5 - 0.2em;
225 &:nth-child( 15 ) ~ & {
226 line-height: @calendarHeight / 4 - 0.2em;
227 margin-bottom: 0.2em;
231 .mw-widget-calendarWidget-item {
236 .mw-widget-calendarWidget {
237 .box-sizing( border-box );
238 border: 1px solid #a2a9b1;
239 .transition( ~'border-color 100ms, box-shadow 100ms' );
243 box-shadow: inset 0 0 0 1px #36c;
266 box-shadow: inset 0 0 0 1px #36c;
270 .transition( ~'background-color 250ms, color 250ms' );
273 background-color: #36c;
278 background-color: #2a4b8d;